<template>
  <div class="welcome-container">
    <!-- 复用导航栏 -->
    <div class="header">
      <div class="logo">
        <img src="@/assets/treval/wallhaven1.png" alt="景区logo">
        <span>云南</span>
      </div>
      <el-menu 
        mode="horizontal"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1" @click="navigateToHome">首页</el-menu-item>
        <el-menu-item index="2" @click="navigateToIntro">景区介绍</el-menu-item>
        <el-menu-item index="3" @click="navigateToCommend" class="is-active">推荐</el-menu-item>
        <el-menu-item index="4" @click="navigateToSearch">搜索</el-menu-item>
        <el-menu-item index="5">个人中心</el-menu-item>
      </el-menu>
    </div>

    <!-- 推荐内容区域 -->
    <div class="recommend-container">
      <div class="recent-view">
        <h3 class="recent-title">您近期看过：</h3>
        <div class="tag-container">
          <el-tag
            v-for="(tag, index) in recentTags"
            :key="index"
            type="info"
            class="recent-tag">
            {{ tag }}
          </el-tag>
        </div>
      </div>
      <h2 class="section-title">精选推荐景区</h2>
      <div class="recommend-list">
        <div 
          class="recommend-card" 
          v-for="scenic in recommendScenics" 
          :key="scenic.id"
          @click="viewDetails(scenic.id)">
          <img :src="scenic.image" class="recommend-image">
          <div class="recommend-info">
            <h3>{{ scenic.name }}</h3>
            <div class="traffic-indicator">
              <div class="progress-container">
                <div 
                  class="progress-bar"
                  :class="{
                    'green': scenic.visitors < 1000,
                    'yellow': scenic.visitors >= 1000 && scenic.visitors < 2000,
                    'red': scenic.visitors >= 2000
                  }"
                  :style="{ width: (Math.min(scenic.visitors, 3000)/3000*100) + '%' }">
                </div>
              </div>
              <span class="traffic-count">{{ scenic.visitors }}人</span>
              <span class="traffic-status">
                {{ 
                  scenic.visitors < 1000 ? '舒适' :
                  scenic.visitors < 2000 ? '一般' : '拥挤'
                }}
              </span>
            </div>
            <div class="tag-container">
              <el-tag 
                v-for="(tag, index) in scenic.tags.slice(0,3)"
                :key="index"
                type="info"
                class="recommend-tag">
                {{ tag }}
              </el-tag>
            </div>
            <el-rate 
              v-model="scenic.score"
              disabled
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
            </el-rate>
            <p class="recommend-desc">{{ scenic.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recentTags: ['自然风光', '古镇风情', '生态保护', '骑行路线', '摄影胜地'], // 示例数据
      recommendScenics: [
      {
        id: 101,
        name: '洱海生态走廊',
        visitors: 800, // 新增人流量
        tags: ['自然风光', '骑行路线', '摄影胜地', '生态保护'],
        score: 4.7,
        description: '环洱海生态廊道全长129公里...',
        image: require('@/assets/treval/湖.jpg')
        },
        {
        id: 102,
        name: '沙溪古镇',
        visitors: 1500, // 新增人流量
        tags: ['茶马古道', '历史遗迹', '慢生活', '古镇风情'],
        score: 4.6,
        description: '保存最完整的茶马古道集市...',
        image: require('@/assets/treval/游客.jpg')
        }
      ]
    }
  },
  methods: {
    // 复用原有导航方法
    navigateToHome() {
      this.$router.push('/treval/welcome');
    },
    navigateToIntro() {
      this.$router.push('/treval/intro');
    },
    navigateToCommend() {
        this.$router.push('/treval/commend');
    },
    navigateToSearch() {
      this.$router.push('/treval/search');
    },
    viewDetails(id) {
      this.$router.push(`/treval/scenic/${id}`);
    }
  }
}
</script>

<style scoped>
.welcome-container {
  background-color: #e3ded0;
  overflow-x: hidden; /* 防止横向滚动 */
  
  /* 新增全局宽度约束 */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* 通用图片约束 */
.welcome-container img {
  max-width: 100%;
  height: auto;
  display: block; /* 消除图片底部间隙 */
}


.header {
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999; /* 提升层级确保覆盖所有元素 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 添加阴影增强层次感 */
  position: fixed;
  top: 0;
  backdrop-filter: blur(5px); /* 毛玻璃效果 */
  font-weight: bold;
}

/* 优化菜单项样式 */
.el-menu {
  background: transparent !important; /* 透明背景 */
}

.el-menu-item {
  font-size: 18px !important;  /* 加大字体 */
  font-weight: 600 !important; /* 加粗字体 */
  padding: 0 20px !important; /* 增加间距 */
  transition: all 0.3s !important;
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important; /* 悬停效果 */
  border-bottom: 2px solid #ffd04b !important; /* 下划线指示 */
}

.el-menu-item.is-active {
  color: #ffd04b !important;
  border-bottom: 2px solid #ffd04b !important;
  background-color: rgba(173, 216, 230, 0.3) !important; /* 淡蓝色半透明背景 */
  backdrop-filter: blur(8px) !important; /* 磨砂玻璃效果 */
  -webkit-backdrop-filter: blur(8px) !important; /* 兼容Safari */
  transition: all 0.3s !important; /* 添加过渡动画 */
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-bottom: 2px solid #ffd04b !important;
  backdrop-filter: blur(4px) !important; /* 悬停时添加轻度模糊 */
  -webkit-backdrop-filter: blur(4px) !important;
}

.logo {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 24px;
  img {
    height: 40px;
    margin-right: 15px;
  }
}

/* 推荐列表专属样式 */
.recommend-container {
  padding: 120px 5% 0;
}

.recommend-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  padding: 20px 0;
}

.recommend-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  cursor: pointer;
}

.recommend-card:hover {
  transform: translateY(-5px);
}

.recommend-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.recommend-info {
  padding: 15px;
}

.tag-container {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recommend-tag {
  padding: 4px 12px;
  border-radius: 15px;
  background: rgba(241, 198, 78, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.recent-view {
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.recent-title {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 18px;
}

.recent-tag {
  margin-right: 10px;
  padding: 8px 15px;
  border-radius: 15px;
  background: rgba(109, 184, 222, 0.2);
  color: #2c3e50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.traffic-count {
  font-size: 12px;
  color: #666;
  margin-right: 10px;
}

.traffic-indicator {
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 8px; /* 缩小间距为8px */
}

.progress-container {
  flex: 1;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  transition: all 0.3s;
  
  &.green { background: #67C23A; }
  &.yellow { background: #E6A23C; }
  &.red { background: #F56C6C; }
}

.traffic-status {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}
</style>